<template>
    <div>
        <!-- 切换栏 -->
        <div class="swiper-tab">
            <block v-for="(item,index) in swipertab" :key="index">
                <div class="swiper-tab-list " :class="ccurrtab == item.index ? 'on' : ''" :data-ccurrent="item.index" @click="tabSwitch(item.index)">{{item.name}}</div>
            </block>
        </div>

        <swiper :style="{height:deviceH}" :data-ccurrent="ccurrtab" class="swiper-box" duration="300" @change="tabChange($event)" :current="ccurrtab">
            <!-- 完成 -->
            <swiper-item>
                <scroll-view class="hot-box" scroll-y="true">
                    <div class="orderDetails" v-for="(good,index) in alreadyOrder" :key="index">
                        <div class="orderListTitle">
                            <span class="userOrder">订单号：{{good.order}}</span>
                            <span class="orderStatus">{{good.state}}</span>
                        </div>
                        <div class="orderListDetails">
                            <div class="productImg">
                                <img :src="good.url" background-size="cover" />
                            </div>
                            <div class="productInfo">
                                <span class="productPrice">{{good.status}}</span>
                            </div>
                            <div class='productNum'>
                                <span>X{{good.num}}</span>
                            </div>
                            <div class='productNum'>
                                <span>{{good.money}}元</span>
                            </div>
                        </div>
                        <div class="productCount">
                            <div class='productCount_but'>查看物流</div>
                        </div>
                    </div>
                </scroll-view>
            </swiper-item>
            <!-- 待付款 -->
            <swiper-item>
                <scroll-view class="hot-box" scroll-y="true">
                    <div class="orderDetails" v-for="(good,item) in waitPayOrder" :key="item">
                        <div class="orderListTitle">
                            <span class="userOrder">订单号：{{good.order}}</span>
                            <span class="orderStatus">{{good.state}}</span>
                        </div>
                        <div class="orderListDetails">
                            <div class="productImg">
                                <img :src="good.url" background-size="cover" />
                            </div>
                            <div class="productInfo">
                                <span class="productPrice">{{good.status}}</span>
                            </div>
                            <div class='productNum'>
                                <span>X{{good.num}}</span>
                            </div>
                            <div class='productNum'>
                                <span>{{good.money}}元</span>
                            </div>
                        </div>
                        <div class="productCount">
                            <div class='productCount_but'>去付款</div>
                        </div>
                    </div>
                </scroll-view>
            </swiper-item>
            <!-- 取消 -->
            <swiper-item>
                <scroll-view class="hot-box" scroll-y="true">
                    <div class="orderDetails" v-for="(good,item) in lostOrder" :key="item">
                        <div class="orderListTitle">
                            <span class="userOrder">订单号：{{good.order}}</span>
                            <span class="orderStatus">{{good.state}}</span>
                        </div>
                        <div class="orderListDetails">
                            <div class="productImg">
                                <img :src="good.url" background-size="cover" />
                            </div>
                            <div class="productInfo">
                                <span class="productPrice">{{good.status}}</span>
                            </div>
                            <div class='productNum'>
                                <span>X{{good.num}}</span>
                            </div>
                            <div class='productNum'>
                                <span>{{good.money}}元</span>
                            </div>
                        </div>
                        <div class="productCount">
                            <div class='productCount_but'>查看物流</div>
                        </div>
                    </div>
                </scroll-view>
            </swiper-item>

        </swiper>
    </div>
</template>

<script>
import { formatTime } from "@/utils/index";
import card from "@/components/card";
import { log } from "util";

export default {
    components: {
        card
    },

    data() {
        return {
            deviceW: 0,
            deviceH: 0,
            ccurrtab: 0,
            swipertab: [
                {
                    name: "全部订单",
                    index: 0
                },
                {
                    name: "待付款",
                    index: 1
                },
                {
                    name: "待收货",
                    index: 2
                },
                {
                    name: "预约项目",
                    index: 3
                }
            ],
            alreadyOrder: [],
            waitPayOrder: [],
            lostOrder: []
        };
    },

    created() {
        // const logs = wx.getStorageSync("logs") || [];
        // this.logs = logs.map(log => formatTime(new Date(log)));
    },
    onReady() {
        // `this` 指向 vm 实例
        // console.log("a is: " + this.a, "小程序触发的 onshow");
        // 页面渲染完成
        this.getDeviceInfo();
        this.orderShow();
    },
    methods: {
        getDeviceInfo: function() {
            /**
             * 获取当前屏幕的高宽并传值
             */
            let that = this;
            wx.getSystemInfo({
                success: function(res) {
                    that.deviceW = res.windowHeight + "px";
                    that.deviceH = res.windowHeight + "px";
                }
            });
        },

        /**
         * @Explain：选项卡点击切换
         */

        tabSwitch: function(index) {
            var that = this;

            that.ccurrtab = index; //当前元素下标传给ccurrtab
            // console.log(that.ccurrtab);
            that.orderShow();
        },

        tabChange(e) {
            var that = this;

            that.ccurrtab = e.mp.detail.current; //获取当前current属性的值并传给ccurrtab

            this.orderShow();
        },

        alreadyShow: function() {
            var that = this;

            that.alreadyOrder = [
                {
                    order: "15214512346215",
                    state: "交易成功",
                    num: "10",
                    status: "猫砂盆猫砂盆猫砂盆",
                    url: "/static/images/index_pet6.png",
                    money: "1458"
                },
                {
                    order: "15214512346215",
                    state: "交易成功",
                    num: "1",
                    status: "猫粮",
                    url: "/static/images/index_pet5.png",
                    money: "205"
                }
            ];
        },

        waitPayShow: function() {
            var that = this;
            that.waitPayOrder = [
                {
                    order: "15214512346215",
                    state: "待付款",
                    num: "1",
                    status: "猫罐头",
                    url: "/static/images/index_pet7.png",
                    money: "186"
                }
            ];
        },

        lostShow: function() {
            var that = this;
            that.lostOrder = [
                {
                    order: "15214512346215",
                    state: "待收货",
                    num: "1",
                    status: "猫罐头",
                    url: "/static/images/index_pet7.png",
                    money: "122"
                }
            ];
        },
        orderShow: function() {
            let that = this;
            switch (this.ccurrtab) {
                case 0:
                    this.alreadyShow();
                    break;
                case 1:
                    that.waitPayShow();
                    break;
                case 2:
                    that.lostShow();
                    break;
            }
        }
    }
};
</script>

<style>
/*切换栏*/

.swiper-tab {
    height: 80rpx;
    line-height: 80rpx;
    /* background: #3b3b3b; */
    color: #505050;
    display: flex;
    position: relative;
    z-index: 2;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    border-bottom: 20rpx solid #f5f5f5;
    padding-left: 30rpx;
    padding-right: 30rpx;
}

.swiper-tab-list {
    font-size: 30rpx;
}

.on {
    border-bottom: 4rpx solid #ff8d1a;
    color: #ff8d1a;
}

.navTopList {
    display: flex;
    width: 100%;
    height: 70rpx;
    background: #fff;
    border-bottom: 1rpx solid #bebebe;
    margin-top: 10rpx;
}

.navTopList .order-info {
    text-align: center;
}

.navTopList .order-info view {
    width: 56rpx;
    height: 56rpx;
    margin-left: 31rpx;
}

.navTopList .order-info text {
    font-size: 34rpx;
}

.navTopList .order-info text.active {
    color: #ff6662;
}

.navTopList .ywc,
.navTopList .dfk,
.navTopList .yqx {
    flex: 1;
}

/*订单列表*/

.orderDetails {
    background: #fff;
    border-bottom: 20rpx solid #f5f5f5;
    margin-bottom: 10rpx;
}

.orderListTitle {
    height: 66rpx;
    line-height: 66rpx;
    border-bottom: 2rpx solid #e5e5e5;
}

.orderListTitle .userOrder {
    padding-right: 50rpx;
    margin-left: 20rpx;
    font-size: 26rpx;
}

.orderListTitle .orderStatus {
    float: right;
    margin-right: 20rpx;
    color: #2f7b27;
    font-size: 26rpx;
}

.orderListDetails {
    display: flex;
    height: 131rpx;
    border-bottom: 2rpx solid #e5e5e5;
    align-items: center;
}

.orderListDetails .productImg {
    /* flex: 1; */
    margin-top: 21rpx;
    margin-left: 23rpx;
    margin-right: 20rpx;
}

.orderListDetails .productImg image {
    width: 75rpx;
    height: 75rpx;
}

.orderListDetails .productInfo {
    width: 340rpx;
    height: 61rpx;
    color: #505050;
    font-size: 30rpx;
    margin-right: 30rpx;
    line-height: 61rpx;
}

.orderDetails .productNum {
    color: #505050;
    font-size: 30rpx;
    width: 135rpx;
}

.orderListDetails .productInfo .productTitle {
    font-size: 30rpx;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin-bottom: 20rpx;
}

.productCount {
    height: 100rpx;
    line-height: 100rpx;
    /* border-bottom: 1rpx solid #f3f3f3; */
    margin-bottom: 10rpx;
}

.productCount > view {
    float: right;
    width: 178rpx;
    height: 66rpx;
    color: #808080;
    border: 2px solid #a6a6a6;
    font-size: 26rpx;
    text-align: center;
    line-height: 66rpx;
    margin-right: 30rpx;
    margin-top: 23rpx;
}
</style>
